<template>
	<view 
	class="QS-Keyboard"
	:style="{
		backgroundColor: keyboardBgColor
	}">
		<slot name="top"></slot>
		<view class="" style="height: 1px;"></view>
		<block v-if="keyboardType == 'xxx'"></block>
		<block v-else-if="keyboardType == 'number'">
			<view class="number-container">
				<view v-for="(item, index) in number_config.items" :key="index" class="number-cols" :style="{ flex: item.flex }">
					<view 
					class="number-cols-item" 
					v-for="(ite, ind) in item.keys" 
					:key="ind" 
					:class="{ flex_1: ite === 'active' }" 
					:style="{ 
						backgroundColor: keyBgColor,
						height: keyHeight,
						'font-size': keyFontSize,
						'font-weight': keyFontWeight
					}"
					@tap.stop="input(ite)">
						<block v-if="ite === 'active'">
							<view class="active-btn" :style="{ backgroundColor: activeBgColor }">
								<text 
								:style="{ 
									'font-size': activeFontSize, 
									color: activeColor,
									'font-weight': activeFontWeight,
								}">
									{{activeName}}
								</text>
							</view>
						</block>
						<block v-else-if="ite === 'close' || ite === 'del'">
							<image 
							:src="images[ite]?(images[ite].src):''" 
							mode="aspectFill" 
							:style="{ 
								height: images[ite]?(images[ite].height):'', 
								width: images[ite]?(images[ite].width):'' }"></image>
						</block>
						<block v-else>
							{{number_config.keys[ite]}}
						</block>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import QSP from '../QS-P/QS-P.vue';
	export default {
		components: { QSP },
		props: {
			keyboardBgColor: {
				type: String,
				default: '#EEEEEE'
			},
			activeName: {
				type: String,
				default: '确认\r\n支付'
			},
			activeColor: {
				type: String,
				default: '#ffffff'
			},
			activeFontSize: {
				type: String,
				default: '36rpx'
			},
			activeBgColor: {
				type: String,
				default: '#ffffff'
			},
			activeFontWeight: {
				type: [String, Number],
				default: ''
			},
			keyBgColor: {
				type: String,
				default: '#ffffff'
			},
			keyFontSize: {
				type: String,
				default: '42rpx'
			},
			keyFontWeight: {
				type: [String, Number],
				default: ''
			},
			images: {
				type: Object, 
				default: ()=>({
					close: {
						src: '',
						height: '54rpx',
						width: '62rpx'
					},
					del: {
						src: '',
						height: '36rpx',
						width: '54rpx'
					},
				})
			},
			keyboardType: {
				type: String,
				default: 'number'
			},
			keyHeight: {
				type: [String, Number],
				default: '100rpx'
			}
		},
		data() {
			return {
				nvalue: '',
				number_config: {
					keyBgColor: '#ffffff',
					items: [
						{
							flex: 1,
							keys: [ '1', '4', '7', '0' ],
						},
						{
							flex: 1,
							keys: [ '2', '5', '8', '.' ],
						},
						{
							flex: 1,
							keys: [ '3', '6', '9', 'close' ],
						},
						{
							flex: 1,
							keys: [ 'del', 'active' ],
						},
					],
					keys: {
						'1': '1',
						'2': '2',
						'3': '3',
						'4': '4',
						'5': '5',
						'6': '6',
						'7': '7',
						'8': '8',
						'9': '9',
						'0': '0',
						'.': '.',
						'close': 'close',
						'del': 'del',
						'active': {
							text: '确认支付',
							color: '#ffffff',
							bgColor: '#C8A776'
						}
					}
				}
			}
		},
		methods: {
			input(key) {
				uni.vibrateShort();
				const val = this.number_config.keys[key];
				if(key == 'active') {
					this.$emit('active', val);
					return;
				}
				if(key == 'close') {
					this.$emit('close', val);
					return;
				}
				if(key == 'del') {
					this.$emit('del', val);
					return;
				}
				this.$emit('input', val);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.QS-Keyboard{
		display: flex;
		flex-direction: column;
		padding-bottom: 1px;
		width: 100%;
		.flex_1 {
			flex: 1;
		}
		.number-container{
			display: flex;
			flex-direction: row;
			flex: 1;
		}
		.number-cols{
			display: flex;
			flex-direction: column;
			&:not(:nth-child(1)) {
				margin-left: 1px;
			}
			.number-cols-item{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				&:active{
					background-color: #f8f8f8 !important;
				}
				&:not(:nth-child(1)) {
					margin-top: 1px;
				}
			}
		}
	}
	.active-btn{
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>
